<template>
    <!--为echarts准备一个具备大小的容器dom-->
    <div id="main" style="width: 1500px;height: 700px;"></div>
</template>
<script>
    import echarts from 'echarts'
    export default {
        name: 'PaperTime',
        methods:{
            drawPie(id){
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption({
                    title: {
                        text: '频道阅读时长统计（top5）'
                    },
                    legend: {},
                    tooltip: {},
                    dataset: {
                        source: [
                            ['time', 'android', '后端', '人工智能','ios','python','数据库'],
                            ['阅读时间计数（min）', 7760.0, 5366.0, 14767.0,6156.0,58067.0,26261.0],
                        ]
                    },
                    xAxis: {type: 'category'},
                    yAxis: {},
                    series: [
                        {type: 'bar'},
                        {type: 'bar'},
                        {type: 'bar'},
                        {type: 'bar'},
                        {type: 'bar'},
                        {type: 'bar'}
                    ]
                })
            }
        },
        //调用
        mounted(){
            this.$nextTick(function() {
                this.drawPie('main')
            })
        }
    }
</script>
<style scoped>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
</style>
